<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 查询表单 -->
      <el-card>
        <gb-form-query
          :queryParams="queryParams"
          :queryFormItems="queryFormItems"
          @search-btn-click="filterQuery"
          @reset-btn-click="resetQuery"
          @text-input-keyup-enter="filterQuery"
        />
      </el-card>
      <!-- 表格 -->
      <el-card style="margin-top: 20px">
        <gb-table-display
          :table-loading="loading_table"
          :table-columns="tableColumns"
          :table-list="tableList"
          @tab-change="
            (val) => {
              queryParams.auditStatus = val;
              fetchData();
            }
          "
        >
          <template v-slot="{row}">
            <!-- 审核中显示 -->
            <el-button type="text" @click="mofidySalary(row)">调薪</el-button>
            <!-- 已拒绝显示 -->
            <el-button type="text">查看</el-button>
          </template>
        </gb-table-display>
      </el-card>
      <!-- 分页  -->
      <gb-pagination
        :page.sync="pageParams.page"
        :limit.sync="pageParams.pageSize"
        :total="total"
        @pagination="fetchData"
      />
      <!-- 打开一个弹出层，查看薪资 -->
      <detail :showDialog.sync="showDialog" ref="personalSalary" />
    </div>
  </div>
</template>

<script>
import { getSalarysList,getPersonalSalarys } from "@/api/salary";
import detail from "./components/detail.vue";
const initialQueryParams = {
  id: "",
  colName: "",
  userName: "",
  colType: undefined,
  datetimeRange_apply: [],
  beginCreateTime: undefined,
  endCreateTime: undefined,
  datetimeRange_audit: [],
  beginAuditTime: undefined,
  endAuditTime: undefined,
  auditStatus: undefined,
  belongTo: 2, //1-平台，2-个人
};
export default {
  components: { detail },
  data() {
    return {
      showDialog: false,
      // 表单
      queryParams: { ...initialQueryParams },
      queryFormItems: [
        { label: "藏品ID", prop: "colId", inputType: "id-19-bit" },
      ],
      // 表格
      loading_table: false,
      tableList: [],
      tableColumns: [
        { label: "姓名", prop: "username" },
        { label: "手机", prop: "mobile" },
        { label: "工号", prop: "workNumber" },
        { label: "聘用形式", prop: "formOfEmployment" },
        { label: "部门", prop: "departmentName" },
        { label: "入职时间", prop: "timeOfEntry", minWidth: 140 },
        { label: "工资基数", prop: "currentBasicSalary" },
        { label: "津贴方案", prop: "name" },
      ],

      // 分页
      pageParams: {
        page: 1,
        pageSize: 10,
      },
      total: 50,
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const { rows, total } = await getSalarysList(this.pageParams);
      this.tableList = rows;
      this.total = total;
    },
    // 调薪
    async mofidySalary(row) {
      this.showDialog = true;
      console.log(row)
      const res= await getPersonalSalarys(row.id)
      this.$refs.personalSalary.form=res
    },
    filterQuery() {},
    resetQuery() {},
  },
};
</script>

<style>
</style>
